<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>整页滚动</title>
    <link rel="stylesheet" type="text/css" href="./css/002test.css">
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function () {
            // 取出所有的页面div对象
            var $pages = $(".pages");
            // 获取window的高度
            var wheight = $(window).height();
            // 设置页面的高度
            $pages.css({ height: wheight });

            // 刚刷新页面 第0个页面添加moving显示动画
            $pages.eq(0).addClass("moving");

            // 取出内容整体的布局对象
            var pagesCon = $(".pages_con");


            var nowIndex = 0;//初始的页面索引 


            // 右侧小圆点的点击事件
            $(".points li").click(function () {
                // 获取点击的索引下标
                nowIndex = $(this).index();
                move();
            });

            var num = 0;
            var timer = null;
            // 滚轮事件
            $(document).mousewheel(function (event, direction) {
                // 滚轮滚动是高频率事件  要降频
                console.log(++num);
                // 滚一次 执行了4次 12345678
                clearTimeout(timer);
                timer = setTimeout(function () {
                    if (direction == -1) {
                        // 向下滚动 索引+1
                        nowIndex++;
                        // 当滑到最后一个的时候 继续滑保持在最后一个页面不变
                        if (nowIndex > $pages.length - 1) {
                            nowIndex = $pages.length - 1
                        }
                    } else if (direction == 1) {
                        // 向上滚动 索引-1
                        nowIndex--;
                        // 当滑到第一个的时候 继续滑保持在第一个页面不变
                        if (nowIndex < 0) {
                            nowIndex = 0;
                        }
                    }
                    // $(".points li").eq(nowIndex).click() 取出画到到的那个页面的对应的小圆点 模拟可它的点击事件
                    move();
                }, 100);
            });

            /**
             * 移动的方法
             */
            function move() {
                // 移动到对应的页面
                pagesCon.animate({ top: -nowIndex * wheight });
                // 取出当前显示的页面 添加moving 有动画效果 注意其余的页面要移除moving 下次才能有动画效果
                $pages.eq(nowIndex).addClass("moving").siblings().removeClass("moving");
                // 当前的小圆点高亮 其余的移除高亮
                $(".points li").eq(nowIndex).addClass("active").siblings().removeClass("active");
            }


        })
    </script>
</head>

<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="./images/003-1.png"></div>
                <div class="right_info">
                    Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

                </div>
            </div>
        </div>
        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="./images/003-2.png"></div>
                <div class="left_info">
                    2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>

        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="./images/003-3.png"></div>
                <div class="right_info">
                    以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
                </div>
            </div>
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="./images/003-4.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="./images/003-5.png"></div>
            </div>

        </div>
    </div>



    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>